<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ZYZ管理系统</title>
    <!--引入的vue.js-->
    <script src="../js/vue.js"></script>
    <!--引入elementUI的css-->
    <link type="text/css" rel="stylesheet" href="../css/index.css">
    <!--引入elementUI的js-->
    <script src="../js/index.js"></script>
    <!--引入axios.js-->
    <script src="../js/axios.min.js"></script>
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
            color: #333;
            height: 100vh;
            overflow: hidden;
        }

        /* 布局容器样式 */
        .el-container {
            height: 100vh;
        }

        /* 头部样式 */
        .el-header {
            background-color: #2c3e50;
            color: #ffffff;
            padding: 0 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            z-index: 10;
        }

        .system-title {
            font-size: 18px;
            font-weight: 600;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            height: 100%;
        }

        /* 侧边栏样式 */
        .el-aside {
            background-color: #2c3e50;
            color: #ecf0f1;
            border-right: 1px solid #34495e;
            transition: all 0.3s ease;
        }

        .el-tree {
            background-color: transparent;
            padding-top: 15px;
        }

        .el-tree-node {
            margin-bottom: 5px;
        }

        .el-tree-node__content {
            color: #ecf0f1;
            height: 40px;
            align-items: center;
            border-radius: 4px;
            margin: 0 10px;
        }

        .el-tree-node__content:hover {
            background-color: #34495e;
        }

        .el-tree-node.is-current > .el-tree-node__content {
            background-color: #3498db;
            color: white;
        }

        .el-tree-node__expand-icon {
            color: #bdc3c7;
        }

        /* 主内容区样式 */
        .el-main {
            background-color: #f5f7fa;
            padding: 15px;
            overflow: hidden;
        }

        /* 标签页样式 */
        .el-tabs {
            height: 100%;
            display: flex;
            flex-direction: column;
            background-color: white;
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .el-tabs__header {
            background-color: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
            padding: 0 15px;
        }

        .el-tabs__content {
            flex: 1;
            overflow: hidden;
            position: relative;
        }

        .el-tab-pane {
            height: 100%;
            overflow: hidden;
        }

        iframe {
            border: none;
            height: 100%;
            width: 100%;
        }

        /* 底部样式 */
        .el-footer {
            background-color: #f8f9fa;
            color: #6c757d;
            border-top: 1px solid #e9ecef;
            font-size: 12px;
        }

        /* 导航菜单样式 */
        .el-menu--horizontal {
            background-color: transparent;
            border-bottom: none;
        }

        .el-submenu__title {
            color: #ecf0f1;
            height: 60px;
            line-height: 60px;
        }

        .el-submenu__title:hover {
            background-color: #34495e;
            color: white;
        }

        .el-submenu__title i {
            color: #bdc3c7;
        }

        .el-menu--horizontal .el-submenu .el-menu {
            background-color: #2c3e50;
            border: 1px solid #34495e;
        }

        .el-menu-item {
            color: #ecf0f1;
            height: 40px;
            line-height: 40px;
        }

        .el-menu-item:hover {
            background-color: #34495e;
            color: white;
        }

        /* 动画和过渡效果 */
        .el-tree-node__children {
            animation: fadeIn 0.2s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(5px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .el-aside {
                width: 100% !important;
                height: auto !important;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="6">&nbsp;</el-col>
                <el-col :span="6">
                    <div class="system-title">ZYZ管理系统</div>
                </el-col>
                <el-col :span="6">&nbsp;</el-col>
                <el-col :span="6">
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
                        <el-submenu index="1">
                            <template slot="title">我的工作台</template>
                            <el-menu-item index="1-1">个人中心</el-menu-item>
                            <el-menu-item index="1-2">账号管理</el-menu-item>
                            <el-menu-item index="1-3" @click="handleLogout">用户退出</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </el-aside>
            <el-container>
                <el-main>
                    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                        <el-tab-pane
                                v-for="(item, index) in editableTabs"
                                :key="item.name"
                                :label="item.title"
                                :name="item.name"
                        >
                            <!--{{item.content}} 该属性的，显示对应标签下的内容-->
                            <!--点击左侧的菜单，右边显示对应的菜单内容-->
                            <!--嵌套iframe html元素，它可以让页面内容包含在另一个页面的里面  src 需要嵌套页面的地址-->
                            <iframe :src="item.url" width="100%" height="100%"></iframe>
                        </el-tab-pane>
                    </el-tabs>
                </el-main>
                <el-footer>© 2025 ZYZ管理系统 - 版权所有</el-footer>
            </el-container>
        </el-container>
    </el-container>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data() {
            return {
                data: [],//树形数据
                defaultProps: { //tree使用的属性
                    children: 'children',
                    label: 'label'
                },
                editableTabsValue: '1', //正在编辑的tab
                editableTabs: [{ //tab集合
                    title: '默认首页',
                    name: '1',
                    /* content: 'Tab 1 content'*/
                    url:'https://www.yuque.com/dashboard'
                }],
                tabIndex: 1, // tab的下标（序号）
                activeIndex: '1',
            };
        },
        created(){
            let _this = this;// 生命周期函数 在页面元素和事件初始化完毕后
            //this代表当前new出来的vue对象
            axios.get('/Day-08-29-SpringBoot-RBAC/menu/queryTreeMenuByUserId')
                .then(function (response) {
                    console.log(response);
                    if(response.data.code==200){
                        _this.data=response.data.data;
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });

        },
        methods:{
            handleNodeClick(data) {
                console.log(data);
                console.log(JSON.stringify(data));
                /*判断url不空才让添加标签页*/
                if (data.url!=null&&data.url!=''&&data.url!='null'&&data.url!=undefined){
                    //调用添加标签页的方法
                    this.addTab(data.label,'/Day-08-29-SpringBoot-RBAC'+data.url);
                }
            },
            addTab(targetName,url) {
                let newTabName = ++this.tabIndex + '';
                //定义是否已经存在标签变量
                let flag=false;
                //定义变量等于循环数组
                let tabs = this.editableTabs;
                for (const tab of tabs) {
                    //如果为true 说明当前点击节点（部门管理），已经存在标签页
                    if(targetName === tab.title){// 判断是否相等  1=='1' 值相等  true   1==='1'  false 类型和值都相等
                        //已经存在label
                        flag = true;
                        newTabName =tab.name; //让正在编辑的序号等于已经存在标签页的序号，为下面激活做准备
                    }
                }
                //判断，当新增标签页的标题不存在时，添加
                if (!flag){
                    this.editableTabs.push({
                        title:targetName,
                        name: newTabName,
                        /*content: 'New Tab content'*/
                        url:url,
                    });
                }
                // 激活
                this.editableTabsValue = newTabName;
            },
            // 移除标签页
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            },
            // 退出
           handleLogout(){
               let _this = this;// 生命周期函数 在页面元素和事件初始化完毕后
               //this代表当前new出来的vue对象
               axios.get('/Day-08-29-SpringBoot-RBAC/user/logout')
                   .then(function (response) {
                       console.log(response);
                       if(response.data.code==200){
                           //跳转到登录界面
                           location.href='/Day-08-29-SpringBoot-RBAC/html/login.html';
                       }
                   })
                   .catch(function (error) {
                       console.log(error);
                   });
           }

        }
    });
</script>
</html>
